// 轮播图的图片（注意更改路径）
import banner from '../../assets/images/banner.png'
// 导入自定义的轮播图组件（注意更改路径）
import MySwiper from '../../components/MySwiper'
import styles from './css/home.module.css'
import HomeInfo from './components/HomeInfo'
import { CloseOutline } from 'antd-mobile-icons'
import { useState } from 'react'

function Home() {
  const [flag, setFlag] = useState(true)
  // 轮播图的数据
  const swiperData = [
    {
      src: banner
    },
    {
      src: banner
    },
    {
      src: banner
    }
  ]

  return (
    <div className="pageHeader">
      <div className={styles.top}>
        <h1>火车票预订</h1>
        <p>便捷购票，服务您的每一次出行</p>
      </div>

      {/* 出行信息的自定义组件 */}
      <HomeInfo />

      {/* 轮播图 */}
      {flag && (
        <div style={{ padding: '0 10px', position: 'relative' }}>
          <MySwiper dt={swiperData} />
          <CloseOutline
            fontSize={30}
            className={styles.close}
            onClick={() => setFlag(false)}
          />
        </div>
      )}
    </div>
  )
}

export default Home
